<template>
    <div id="cart" :class="{'highligh': totalCount > 0}">
        <div class="cart-wrapper">
            <div class="content-left">
                <div class="logo-wrapper" :class="{'highligh': totalCount > 0}">
                    <span class="icon-shopping_cart logo" :class="{'highligh': totalCount > 0}" @click="toggleList"></span>
                    <i class="num" v-show="totalCount">{{totalCount}}</i>
                </div>
                <div class="desc-wrapper">
                    <p class="total-price" v-show="totalPrice">￥{{totalPrice}}</p>
                    <p class="tip" :class="{'highligh': totalCount > 0}">另需{{poiInfo.shipping_fee_tip}}</p>
                </div>
            </div>
            <div class="content-right" :class="{'highligh': totalCount > 0}">{{payStr}}</div>
            <div class="shopcart-list" :class="{'show': listShow}" v-show="listShow">
                <div class="list-top" v-if="poiInfo.discounts2">{{poiInfo.discounts2[0].info}}</div>
                <div class="list-header">
                    <h3 class="title">1号口袋</h3>
                    <div class="empty" @click="clearAll">
                        <img src="./img/ash_bin.png" />
                        <span>清空购物车</span>
                    </div>
                </div>
                <div class="list-content" ref="listContent">
                    <ul>
                        <li v-for="item in selectFoods" class="food-item">
                            <div class="desc-wrapper">
                                <div class="desc-left">
                                    <p class="name">{{item.name}}</p>
                                    <p class="unit" v-show="!item.description">{{item.unit}}</p>
                                    <p class="description" v-show="!item.unit">{{item.description}}</p>
                                </div>
                                <div class="desc-right">￥{{item.min_price}}</div>
                            </div>
                            <div class="cartcontrol-wrapper">
                                <AppCartControl :food="item"/>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="list-bottom"></div>
            </div>
        </div>
        <div class="shopcart-mask" v-show="listShow" @click="hideMask"></div>
    </div>
</template>

<script>
    import BSscoll from 'better-scroll'
    import AppCartControl from './../cartcontrol/CartControl'

    export default {
        name: 'Cart',
        props: ['poiInfo', 'selectFoods'],
        components: {
            AppCartControl
        },
        data() {
            return {
                fold: true
            }
        },
        methods: {
            toggleList() {
                if (!this.totalCount) return;
                this.fold = !this.fold;
            },
            clearAll() {
                this.selectFoods.forEach(item => {
                    item.count = 0;
                })
            },
            hideMask() {
                this.fold = true;
            }
        },
        computed: {
            totalCount() {
                let num = 0;
                this.selectFoods.forEach(item => {
                    num += item.count;
                })
                return num;
            },
            totalPrice() {
                let total = 0;
                this.selectFoods.forEach(item => {
                    total += item.min_price * item.count;
                })
                return total;
            },
            payStr() {
                return this.totalCount ? "去结算" : this.poiInfo.min_price_tip;
            },
            listShow() {
                if (!this.totalCount) {
                    this.fold = true;
                    return false;
                }
                let show = !this.fold;
                if (show) {
                    this.$nextTick(() => {
                        if (!this.shopScroll) {
                            this.shopScroll = new BSscoll(this.$refs.listContent, {
                                click: true
                            })
                        } else {
                            this.shopScroll.refresh();
                        }
                    })
                }
                return show;
            }
        }
    }
</script>

<style scoped>
    .cart-wrapper {
        width: 100%;
        height: 51px;
        background: #514f4f;
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        z-index: 99;
    }
    
    .cart-wrapper .content-left {
        flex: 1;
    }
    
    .cart-wrapper .content-right {
        flex: 0 0 110px;
        font-size: 15px;
        color: #BAB9B9;
        line-height: 51px;
        text-align: center;
        font-weight: bold;
    }
    
    .cart-wrapper .content-left .logo-wrapper {
        width: 50px;
        height: 50px;
        background: #666666;
        border-radius: 50%;
        position: relative;
        top: -14px;
        left: 10px;
        text-align: center;
        float: left;
    }
    
    .cart-wrapper .content-left .logo-wrapper .logo {
        font-size: 28px;
        color: #c4c4c4;
        line-height: 50px;
    }
    
    .cart-wrapper .content-left .desc-wrapper {
        float: left;
        margin-left: 13px;
    }
    
    .cart-wrapper .content-left .desc-wrapper .tip {
        font-size: 12px;
        color: #bab9b9;
        line-height: 51px;
    }
    
    .cart-wrapper .content-left .logo-wrapper.highligh {
        background: #ffd161;
    }
    
    .cart-wrapper .content-left .logo-wrapper .logo.highligh {
        color: #2D2B2A;
    }
    
    .cart-wrapper .content-left .logo-wrapper .num {
        width: 15px;
        height: 15px;
        line-height: 15px;
        border-radius: 50%;
        font-size: 9px;
        color: white;
        background: red;
        position: absolute;
        right: 0;
        top: 0;
    }
    
    .cart-wrapper .content-left .desc-wrapper .tip.highligh {
        line-height: 12px;
    }
    
    .cart-wrapper .content-right.highligh {
        background: #FFD161;
        color: #2D2B2A;
    }
    
    .cart-wrapper .content-left .desc-wrapper .total-price {
        font-size: 18px;
        line-height: 33px;
        color: white;
    }
    
    .cart-wrapper .shopcart-list {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
    }
    
    .cart-wrapper .shopcart-list.show {
        transform: translateY(-100%);
    }
    
    .cart-wrapper .shopcart-list .list-top {
        height: 30px;
        text-align: center;
        font-size: 11px;
        background: #f3e6c6;
        line-height: 30px;
        color: #646158;
    }
    
    .cart-wrapper .shopcart-list .list-header {
        height: 30px;
        background: #F4F4F4;
    }
    
    .cart-wrapper .shopcart-list .list-header .title {
        float: left;
        border-left: 4px solid #53c123;
        padding-left: 6px;
        line-height: 30px;
        font-size: 12px;
    }
    
    .cart-wrapper .shopcart-list .list-header .empty {
        float: right;
        line-height: 30px;
        margin-right: 10px;
        font-size: 0;
    }
    
    .cart-wrapper .shopcart-list .list-header .empty img {
        height: 14px;
        margin-right: 9px;
        vertical-align: middle;
    }
    
    .cart-wrapper .shopcart-list .list-header .empty span {
        font-size: 12px;
        vertical-align: middle;
    }
    
    .cart-wrapper .shopcart-list .list-content {
        max-height: 245px;
        overflow: hidden;
        background: white;
    }
    
    .cart-wrapper .shopcart-list .list-content .food-item {
        height: 38px;
        padding: 12px 12px 10px 12px;
        border-bottom: 1px solid #F4F4F4;
    }
    
    .cart-wrapper .shopcart-list .list-content .food-item .desc-wrapper {
        float: left;
        width: 240px;
    }
    
    .cart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left {
        float: left;
        width: 170px;
    }
    
    .cart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .name {
        font-size: 16px;
        margin-bottom: 8px;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 16px;
    }
    
    .cart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .unit {
        font-size: 12px;
        color: #B4B4B4;
    }
    
    .cart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .description {
        font-size: 12px;
        color: #B4B4B4;
        overflow: hidden;
        height: 12px;
    }
    
    .cart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-right {
        float: right;
        width: 70px;
        text-align: right;
        line-height: 36px;
    }
    
    .cart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-right .price {
        font-size: 12px;
        line-height: 38px;
    }
    
    .cart-wrapper .shopcart-list .list-content .food-item .cartcontrol-wrapper {
        float: right;
        margin-top: 6px;
    }
    
    #cart .shopcart-mask {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 98;
        background: rgba(7, 17, 27, 0.6);
    }
</style>